<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .quickmark{
        width: 250px;
        height: 250px;
        
        background-image: url(./images/张伟3.jpg);
        background-size: cover;
        /* background-position: center; */
        /* background-repeat: no-repeat; */
        background-position: -155px 0;

        margin: 70px;
        /* opacity: 0; */
        transition: .5s;
    }
    .before-box{
        width: 100px;
        height: 100px;
        background-color: greenyellow;
    }
    .line{
        width: 80px;
        height: 250px;
        background-color: pink;
        border-radius: 100px;
        position: absolute;
        /* left: 200px; */
        /* top: 0; */
    }
    .after-box{
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }


    .line-area .line,.line-other{
        position: absolute;
        /* right: calc(var(--i)*100px); */
        width: calc(var(--w)*40px);
        height: 500px;
        /* overflow: hidden; */
        background-color: rgb(240, 220, 150);
        /* transform: rotateZ(220deg) translate(0,0); */
        border-radius: 100px;
        transition: .5s .5s;
    }
    .line:nth-child(2){
        background-color: rgb(240, 190, 230);
    }
    .line-area .line-other{
        left: -470px;
        top: -140px;
        
        /* right: 400px; */
        /* left: -150px; */
        width: 70px;
        background-color: rgb(90, 220, 150);
    }
    .container:hover .line-area div{
        transition: .5s calc(var(--i)*.1s);
        transform: rotateZ(220deg) translate(-200px,400px);
    }
    .container:hover .txt{
        transition: 1s .5s;
        left: 370px;
    }
    .container:hover .txt span{
        transition: 1s .5s;
        top: 105px;
    }
    .container:hover .txt h2{
        transition: 1s .5s;
        opacity: 1;
    }
    .container .quickmark{
        width: 250px;
        height: 250px;
        position: absolute;
        background-image: url(./images/张伟3.jpg);
        background-size: cover;
        background-position: -155px 0;
        background-repeat: no-repeat;
        margin: 70px;
        opacity: 0;
        transition: .5s;
    }
    .container:hover .quickmark{
        transition: 1s 1.3s;
        opacity: 1;
    }
    .inline-block{
        /* font-size: 0; */
    }
</style>
<body>
    <!-- <div class="quickmark"></div> -->
    <!-- <div class="before-box"></div>
    <div class="line"></div> -->
    <!-- <div class="after-box"></div> -->
    <button onclick="slideToPrev()">点我</button>
    <div class="inline-block">
        <input type="text">
        <input type="text">
    </div>
    <script>
        const btn = document.querySelector('button');
        btn.addEventListener('click',()=>{
            alert(1111)
        })
        btn.removeEventListener('click',()=>{
            alert(2222)
        })
    </script>
</body>

</html>